<template>
	<!--中信银行2021\04\06新版本首页-->
	<div class="home">
		<!-- 头部 -->
	     <ZxyhHeader v-if="$channel=='zxyh' && !isBannerBox && getPlatform =='app'"></ZxyhHeader>
		 <div class="connect"   :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
			<Banner v-if='isBannerBox' :key = "numKey" :bannerDataArray='bannerDataArray' />
			<MiddleIconCom  v-if='isMiddleIconCom'  :middleIconArray = 'middleIconArray'  />
			<LivePreviewCom />
			<HomeShortVideoCom :shortVideoArrayInfo = 'shortVideoArrayInfo'/>
			<StarHostsCom v-if="isStarHostsCom" :anchorStarArray = 'anchorStarArray' />
			<GreatVideCom />
		</div>
	</div>
</template>

<script>
	import Banner from "./newHomeCom/banner.vue";
	import MiddleIconCom from "./newHomeCom/middleIconCom.vue";
	import LivePreviewCom from "./newHomeCom/livePreviewCom.vue"; //预告组件
	import HomeShortVideoCom from "./newHomeCom/homeShortVideoCom.vue"; //短视频精彩看 展示2个
	import StarHostsCom from "./newHomeCom/starHostsCom.vue"; //明星主播 展示5个
	import GreatVideCom from "./newHomeCom/greatVideoCom.vue"; //精彩视频
	import ZxyhHeader from "../components/zxyh/zxyhHeader";
    import wxApi from "../util/wxApi";
	export default {
		components: {
			Banner,
			MiddleIconCom,
			LivePreviewCom,
			HomeShortVideoCom,
			StarHostsCom,
			GreatVideCom,
			ZxyhHeader
		},
		mixins: [wxApi],
		data() {
			return {
				isBannerBox: false,
				isMiddleIconCom:false,
				isStarHostsCom:false,
				numKey:1,
				bannerDataArray: [], //banner列表
				anchorStarArray:[],  //明星主播取前五
				shortVideoArrayInfo:[],  //短视频精彩看取2
				middleIconArray:[],
				getPlatform:fun.getPlatform(),//wx app
                bannerSwitch:true,//banner开关
                shareInfoData: {}, //分享信息
			}
		},
		computed: {
			isLoadIcon() {
				if(this.$store.state.SysOrgInfo.icon) {
					this.wxRegister(this.wxRegCallback);
					return true
				} else {
					return false
				}
			},
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
		},
		watch: {
			isLoadIcon(val, oldVal) {},
		},
		created() {
			this.getWXInfo(); //分享信息
		 if(this.bannerSwitch){
		 	 this.getBanner();
		 	 setTimeout(()=>{
		 	 	this.bannerSwitch = false
		 	 },1000)
		 }
		},
		mounted() {
			this.getMiddleIconData();
			this.getAnchorStar();
			this.getShortVideo();//短视频精彩看
			//this.$store.dispatch("showNav");
		},
		activated: function() {
			if(!this.bannerSwitch){
				this.getBanner();
			}
			this.$store.dispatch("showNav");
			fun.dotNum('home_page');

			this.numKey++;
		},

		methods: {
			//分享信息
			getWXInfo() {
				this.$http.get("/h5live/getOrgShare")
					.then(res => {
						if(res.data.code == "000000" && res.data.data !== null) {
							this.shareInfoData = res.data.data;
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			wxRegCallback() {
				let opstion = {
					//link: window.location.origin + '/#' + this.$route.path,
					link:fun.getShareUrl(this.$channel,'zxyhHome'),
					title: this.shareInfoData.shareTitle || '【' + this.$store.state.SysOrgInfo.name + '】一起来看直播吧！', // 分享标题
					desc: this.shareInfoData.shareDesc || "精彩直播，尽在" + this.$store.state.SysOrgInfo.name + "手机直播！", //分享描述
					imgUrl: this.shareInfoData.shareIcon || this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert("分享成功");
					},
					error: function(e) {
						//alert('分享失败:'+JSON.stringify(e))
					}
				};
				this.ShareTimeline(opstion);
			},
			getMiddleIconData(){
				this.$http.get("h5live/zx/home/niceAlbum").then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length != 0){
								this.middleIconArray = res.data.data;
								this.isMiddleIconCom = true;
							}else{

							}

						}
					})
					.catch(response => {

					});
			},
			getShortVideo(){//短视频精彩看
					this.$http.get("h5live/zx/home/niceVideos").then(res => {
						if(res.data.code == "000000") {
							this.shortVideoArrayInfo = res.data.data[0];
						}
					})
					.catch(response => {

					});
			},
			getAnchorStar(){//明星主播接口
					this.$http.get("h5live/zx/home/anchorStar").then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length != '0') {
								this.anchorStarArray = res.data.data.splice(0,5)
								this.isStarHostsCom = true;
							}else{
								this.isStarHostsCom = false;
							}
						}
					})
					.catch(response => {

					});
			},
			//获取banner
			getBanner() {
				this.$http.get("h5live/zx/home/adlist?useType=1").then(res => { //useType 1 是 首页    2 专辑管理
						if(res.data.code == "000000") {
							if(res.data.data.length != '0') {
								this.bannerDataArray = res.data.data;
								this.isBannerBox = true;
							}else{
								this.isBannerBox = false;
							}
						}
					})
					.catch(response => {

					});
			},
		}
	}
</script>

<style scoped="scoped">
	.home {
		width: 100vw;
		height: 100vh;
		/*background: url(../assets/images/zxyh/homeBg.jpg) repeat;
		background-size: 100vw 100vh;*/
		overflow: scroll;
		/*background: cover;*/
	}

	.connect {
		min-height: 100vh;
		/* background: url(../assets/images/zxyh/homeBg.jpg) repeat; */
		background-size: 100vw 100vh !important;
		padding-bottom: 100px;
	}
	.header-conatiner,.header-conatiner-zxyhIos{
		position: fixed;
		z-index: 16;
	}
	.header-conatiner ~ .connect{
			min-height: calc(100vh - 88px);
			margin-top: 88px;
		}
	.header-conatiner-zxyhIos ~ .connect{
        min-height: calc(100vh - 148px);
		margin-top: 148px;
	}
	.home /deep/ .right-back{
		background: url('../assets/images/zxyh/back_white.png') no-repeat!important;
		background-size: 100% 100%!important;
	}
	.home /deep/ .right-close{
		background: url('../assets/images/zxyh/close_white.png') no-repeat!important;
		background-size: 100% 100%!important;
	}

</style>
